<template>
  <div>
    <h2>营收对账页面</h2>
    <div class="xinxi">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="订单类型">
          <el-select v-model="form.region" placeholder="全部" style="width: 150px" clearable>
            <!--            <el-option label="区域一" value="shanghai"></el-option>-->
            <!--            <el-option label="区域二" value="beijing"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="form.orderNumber" style="width: 180px" placeholder="请输入订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="核销状态">
          <el-radio-group v-model="form.cancelStatus">
            <el-radio label="2">待核销</el-radio>
            <el-radio label="1">已核销</el-radio>
            <el-radio label="3">核销异常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button type="primary" @click="findPage()" style="margin-left: 170px">查询</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <br><br>
        订单时间
        <el-date-picker
            v-model="form.date1"
            type="datetime"
            placeholder="选择日期"
            style="width: 200px"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable>
        </el-date-picker>
        至
        <el-date-picker
            v-model="form.date2"
            type="datetime"
            placeholder="选择日期"
            style="width: 200px"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable>
        </el-date-picker>
        <el-form-item label="支付状态">
          <el-radio-group v-model="form.paymentStatus">
            <el-radio label="1">已支付</el-radio>
            <el-radio label="2">待支付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="核销编号" style="margin-left: 90px">
          <el-input v-model="form.orderCancel" style="width: 200px" placeholder="输入核销编号查询" clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="exportExcel()">导出</el-button>
      </el-form>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          prop="orderNumber"
          label="订单编号">
      </el-table-column>
      <el-table-column
          prop="startingDate"
          label="订单发出时间">
        <!--        <template slot-scope="scope">-->
        <!--        {{scope.row.startingDate|format('yyyy-MM-dd hh:mm:ss')}}-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column
          prop="orderStatus"
          label="订单状态">
        <template slot-scope="scope">
          {{ scope.row.orderStatus == 1 ? "已完成" : scope.row.orderStatus == 2 ? "待接单"
            : scope.row.orderStatus == 3 ? "未接单":"已取消"}}
        </template>
      </el-table-column>
      <el-table-column
          prop="totalAmount"
          label="订单费用">
      </el-table-column>
      <el-table-column
          prop="userId"
          label="用户ID">
      </el-table-column>
      <el-table-column
          prop="alipayNumber"
          label="用户支付宝编号">
      </el-table-column>
      <el-table-column
          prop="paymentStatus"
          label="支付状态">
        <template slot-scope="scope">
          {{ scope.row.paymentStatus == 1 ? "待支付" : "已支付" }}
        </template>
      </el-table-column>
      <el-table-column
          prop="paymentTime"
          label="支付时间">
        <!--        <template slot-scope="scope">-->
        <!--          {{scope.row.paymentTime|format('yyyy-MM-dd hh:mm:ss')}}-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column
          prop="cancelMoney"
          label="核销金额">
      </el-table-column>
      <el-table-column
          prop="orderCancel"
          label="核销编号">
      </el-table-column>
      <el-table-column
          prop="cancelStatus"
          label="核销状态">
        <template slot-scope="scope">
          {{ scope.row.cancelStatus == 1 ? "已核销" : "待核销" }}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button type="text" size="small" @click="particulars(scope.row.id)" round>费用详情</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog
        title="费用详情"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="订单编号" prop="">
          <el-input v-model="ruleForm.orderNumber" placeholder="" disabled></el-input>
        </el-form-item>
        <!--        <el-form-item label="支付状态" prop="">-->
        <!--          <el-input v-model="ruleForm.paymentStatus" placeholder="" ></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="支付状态" prop="">
          <el-radio-group v-model="ruleForm.paymentStatus" disabled>
            <el-radio :label="1">已支付</el-radio>
            <el-radio :label="2">待支付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付时间" prop="">
          <el-input v-model="ruleForm.paymentTime" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item label="支付编号" prop="">
          <el-input v-model="ruleForm.alipayNumber" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item label="支付金额" prop="">
          <el-input v-model="ruleForm.name" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item label="签约费率" prop="">
          <el-input v-model="ruleForm.labelFee" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item label="实际费率" prop="">
          <el-input v-model="ruleForm.practicalFee" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item label="费用额" prop="">
          <el-input v-model="ruleForm.earnings" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item label="核销金额" prop="">
          <el-input v-model="ruleForm.cancelMoney" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleClose()" center>返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import * as XLSX from 'xlsx';
export default {
  name: "YingshouView",
  data() {
    return {
      payment: [],
      cancelStatus: [],
      tableData: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      form: {},
      ruleForm: {},
      dialogVisible: false,
      orderType: '全部',
      orderNumber: '',
      checkoutStatus: [],
      startTime: null,
      endTime: null,
      paymentStatus: [],
      orderList: []
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val
      this.findPage();
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.findPage();
    },
    findPage() {
      axios.post(`http://localhost:9999/api-function/orderBill/findAll?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.form).then(res => {
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    },
    exportExcel() {
      //导出
      // 创建一个工作簿（workbook）
      const ws = XLSX.utils.json_to_sheet(this.tableData); // 将 JSON 数据转换为工作表
      const wb = XLSX.utils.book_new(); // 新建工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作表添加到工作簿中

      // 导出 Excel 文件
      XLSX.writeFile(wb, '营收对账.xlsx');
    },
    resetForm() {
      this.form = {}
      this.findPage();
    },
    particulars(id) {
      axios.post(`http://localhost:9999/api-function/orderBill/particulars?id=${id}`).then(res => {
        this.ruleForm = res.data.data;
        this.dialogVisible = true;
      })
    },
    handleClose() {
      this.dialogVisible = false;
    }

  },
  created() {
    this.findPage();
  },
}
</script>

<style scoped>
.xinxi {

}

</style>
